<template>
  <div id="forget_container">
    <div class="forget-wrap">
      <Return title="充值"></Return>
      <div class="money-box">
        <div :class="{'money-item': true, 'money-active': index == amount_index}" @click="chooseAmount(index, item)" v-for="(item, index) in amount_data" :key="index">{{item}}</div>
        <!-- <div class="money-item">200</div>
        <div class="money-item">400</div>
        <div class="money-item">600</div>
        <div class="money-item">800</div>
        <div class="money-item">1000</div> -->
      </div>
      <div class="input">
        <el-input
          class="custom-input"
          v-model.number="amount_money"
          placeholder="请输入充值金额"
          autocomplete="off"
        ></el-input>
      </div>
      <div class="payType">
        <div class="type">支付类型</div>
        <div class="wx">微信<i class="el-icon-success"></i></div>
        <div class="zfb">支付宝<i class="el-icon-success"></i></div>
      </div>
      <button class="recharge" @click="confirmPay" :disabled="!amount_data_money && !amount_money">
        确认充值
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recharge",
  data() {
    return {
      amount_data: [100, 200, 400, 600, 800, 1000],
      amount_index: 100,
      amount_data_money: '',
      amount_money: '',
      id: this.$store.state.userAbout.user_id || JSON.parse(localStorage.getItem('userInfo')).id
    };
  },
  methods: {
    // 选择价格
    chooseAmount(index, money) {
      this.amount_index = index
      this.amount_data_money = money
    },
    // 充值
    async confirmPay() {
      let data = {
        user_id: this.id,
        deposit: this.amount_data_money || this.amount_money,
        order_type: 'deposit'
      }
      let result = await this.$API.order.orderPay(data)
      if (result.code === 200) {
        this.$router.push({
          name: 'PayStatus',
          query: {
            order_id: result.order_id
          }
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
#forget_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .forget-wrap {
    width: 348px;
    margin: auto;
    .money-box {
      display: flex;
      flex-wrap: wrap;
      width: 348px;
      margin: auto;
      .money-item {
        width: 30%;
        height: 50px;
        margin-right: 9px;
        margin-bottom: 20px;
        cursor: pointer;
        color: #fff;
        border-radius: 10px;
        font-size: 22px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #42484d;
      }
      .money-active {
        background-color: #00a2ff;
        border: 1px solid #00a2ff;
      }
    }
    .payType {
      color: #fff;
      width: 100%;
      margin-top: 50px;
      border-bottom: 1px solid #42484d;
      padding-bottom: 20px;
      .type {
        opacity: .8;
      }
      .wx, .zfb {
        margin-top: 20px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
      }
    }
    .recharge {
      margin-top: 80px;
      color: #fff;
      background-color: #00a2ff;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 3px 5px;
      border-radius: 30px;
      cursor: pointer;
      border: none;
      width: 100%;
    }
  }
}
</style>>